﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Effect.aspx.cs" Inherits="Effect" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="DemoTitleContentPlaceHolder" Runat="Server">
Effects
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="DemoContentPlaceHolder" Runat="Server">
<asp:Panel runat="server" Height="150" Width="300" BorderWidth="1" ID="ParentPanel">
<asp:Panel runat="server" ID="Panel1">
this is the content of the panel<br />
this is the content of the panel<br />
this is the content of the panel<br />
this is the content of the panel<br />
this is the content of the panel<br />
this is the content of the panel<br />
</asp:Panel>
</asp:Panel>
<div id="ResultDiv" runat="server">Click me</div>

<cc2:Effect runat="server" ID="Effect2"
    EffectType="drop" Toggle="true" Options="percent: 0" 
    Event="click" TriggerSelector="#{ResultDiv}" 
    Selector="#{Panel1}" 
/>

<asp:Label ID="Label1" runat="server" Text="Hover Here"></asp:Label>
<br />
<asp:Image ID="Image1" AlternateText="Sneakers!" ImageUrl="http://farm3.static.flickr.com/2104/2164650429_af2d3c7e9f_s.jpg" runat="server" />   

<cc2:Effect ID="Effect1" runat="server" 
    EffectType="explode" Toggle="true" Options="percent: 0"
    Event="mouseover" TriggerSelector="#{Label1}" 
    Selector="#{Image1}"
/>
<cc2:Effect ID="Effect3" runat="server" 
    EffectType="bounce" Toggle="true" Options="percent: 0"
    Event="click" TriggerSelector="#{Image1}" 
    Selector="#{Image1}"
/>    
<cc2:Resizeable ID="Resizeable1" runat="server" Selector="#{Image1}" />
<cc2:Draggable ID="Draggable1" runat="server" Selector="#{Image1}" />
    
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="SourceContentPlaceHolder" Runat="Server">
<pre>
&lt;asp:Panel runat="server" ID="Panel1"&gt;
this is the content of the panel&lt;br /&gt;
this is the content of the panel&lt;br /&gt;
this is the content of the panel&lt;br /&gt;
this is the content of the panel&lt;br /&gt;
this is the content of the panel&lt;br /&gt;
this is the content of the panel&lt;br /&gt;
&lt;/asp:Panel&gt;
&lt;div id="ResultDiv" runat="server"&gt;Click me&lt;/div&gt;
&lt;script language="javascript"&gt;
    function callback() {
        jQuery("#ResultDiv").text("done");
    }
&lt;/script&gt;
&lt;cc2:Effect EffectType="drop" Toggle="true" Callback="callback" Options="percent: 0" Event="click" TriggerSelector="#{ResultDiv}" Selector="#{Panel1}" runat="server" /&gt;
</pre>
</asp:Content>

